<html xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" xmlns:th="http://www.thymeleaf.org">
<style>
    .session_name{
        font-size: 19px;
        /*渐变背景*/
        background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%,
        #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
        color: transparent; /*文字填充色为透明*/
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;          /*背景剪裁为文字，只将文字显示为背景*/
        background-size: 200% 100%;            /*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*/
        /* 动画 */
        animation: masked-animation 1s infinite linear;
    }
    @keyframes masked-animation {
        0% {
            background-position: 0 0;   /*background-position 属性设置背景图像的起始位置。*/
        }
        100% {
            background-position: -100% 0;
        }
    }
</style>
<script src="/layui/layui.js"></script>
<script src="/layui/layui.all.js" charset="utf-8"></script>
<script src="/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/location.js"></script>

<div class="head">
    <div class="wrapper clearfix">
        <div class="clearfix" id="top">
            <h1 class="fl"><span class="session_name" id="hoppy"></span></h1>
            <div class="fr clearfix" id="top1">
                <shiro:guest>
                    <p class="fl">
                        <a href="/login" id="login">登录</a>
                        <a href="/register" id="reg">注册</a>
                    </p>
                </shiro:guest>
                <shiro:user>
                    <p class="fl">
                        当前用户：<a href="/mygxin"><span style="color: red;" class="session_name" th:text="${session.user.username}"></span></a>
                    </p>
                </shiro:user>
                <form action="/search/selectAll" method="post" class="fl" id="SearchForm">
                    <input type="text" placeholder="热门搜索：水果" name="searchname" th:value="${param.searchname}"  />
                    <input type="button" onclick="$('#SearchForm').submit()" />
                </form>
                <div class="btn fl clearfix">
                    <a href="/mygxin"><img src="/img/grzx.png"/></a>
                    <a href="javascript:void(0);" class="er1"><img src="/img/ewm.png"/></a>
                    <a href="/cart"><img src="/img/gwc.png"/></a>
                    <p><a href="javascript:void(0);"><img src="/img/TIM图片20191102133642.jpg"/></a></p>
                </div>
            </div>
        </div>
        <ul class="clearfix" id="bott">

        </ul>
    </div>
</div>
<script th:inline="javascript">

    $(document).ready(function() {
        let sh=setInterval(setTimeOut,1000) ;
        function setTimeOut() {
            var endtime=new Date("2020/1/24,00:00:00");//结束时间
            var nowtime = new Date();//当前时间
            var lefttime=  parseInt((endtime.getTime()-nowtime.getTime())/1000)  ;
            d=  parseInt(lefttime/(24*60*60))  ;
            h=  parseInt(lefttime/(60*60)%24)  ;
            m=  parseInt(lefttime/60%60)  ;
            s=  parseInt(lefttime%60)  ;

            document.getElementById("hoppy").innerHTML="距离除夕还剩："+d+"天"+h+"小时"+m+"分"+s+"秒";
            if(lefttime<=0){
                document.getElementById("hoppy").innerHTML="新 年 快 乐";
                clearInterval(sh);
            }
        }
    });
        $.post("/category/selectAll",{},function (data) {
        var categoryList='<li><a href="/index">首页</a></li>';
        for (var i = 0; i < data.length; i++) {
            categoryList+='<li><a href="'+data[i].cHref+'">'+data[i].cName+'</a></li>';
        }
        $("#bott").html(categoryList);
    })
    /*]]>*/
</script>
</html>


